<template>
    <div>
        <Tables 
        :title ='title' 
        :butns = 'butns' 
        :field = 'field' 
        :tableData ='tableData' 
        :pageSize='pageSize' 
        :totalNum="total_num" 
        :collectField = "collect_field" 
        :dbClickDisabled ="true"
        :rankable ="true"
        :curPage ="cur_page" 
        :clearSelectItems="selectedItems" 
        :tableNotice="momal_notice"
        @reset="reset"  
        @loadData ="setData" 
        @sentSelectedItems="getSelectedItems"
        @sentEditData="getEditData"
        @changePageSize = 'changePageSize'
        @rankData = "rankData"
        ></Tables>

        <Modals 
        :id ="'modal'" 
        :title ='title' 
        :field = 'field' 
        :collectField = "collect_field"
        :selectItem = "select_item" 
        :status = "status" 
        :errorMsg="errorMsg" 
        :type="type"
        :selectedItems="selectedItems" 
        :editData = "edit_data" 
        :momalNotice="momal_notice"
        @sentErrorMsg = "getErrorMsg"
        @addEvent = 'addData'
        @delEvent = 'delData'
        ></Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import defendService from 'services/defendService'
    import PageData from 'libs/PageData'
    export default {
		components:{
		    Tables,
            Modals        
	    },
        data() {
            return{
                title:this.$t('safeplot.navBtn5'),
                butns:[
                    {
                        type:'add',
                        name:this.$t('common.addBtn'),
                        event:'addEvent',
                        icon:'/static/img/add.png',
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:this.$t('common.delBtn'),
                        event:'delEvent',
                        icon:'/static/img/delete.png',
                        class:'del_btn',
                    }
                ],
                field:[
                    {
                        type:'checkbox', 
                    },
                    {
                        type:'rank'
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.whiteTableTh1'),
                        name:'mac',
                        regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$|^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/,
                        requried:true, 
                        remark:this.$t('safeplot.bwRemark')
                    },
                    {
                        type:'none',
                        label:this.$t('safeplot.bwTableTh2'),
                        name:'timestamp',
                    },
                    {
                        type:'textarea',
                        label:this.$t('safeplot.bwTableTh3'),
                        name:'note',
                        regex:/^[\w\u4e00-\u9fa5]{1,16}$/,
                        requried:false, 
                        remark:this.$t('safeplot.remark2')  
                    },
                    {
                        type:'none',
                        label:this.$t('safeplot.bwTableTh4'),
                        name:'description'
                    }
                ],
                tableData:[],
                pageSize: [10, 20, 40, 80],
                size:10,
                total_num:1,
                cur_page:1,
                order: '',
                by: '',
                collect_field:'id',              
                select_item:[],
                status:"",
                errorMsg:'',
                type:'',
                selectedItems:[],
                edit_data:{},
                momal_notice:this.$t('safeplot.bwTableNotice')
            }
        },
        created() {
            this.loadData()
        },
        methods:{
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
             getErrorMsg(msg) {
                this.errorMsg = msg
            },
            reset(type) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            },  
            loadData() {
                let params = {
                    page: this.cur_page,
                    row: this.size,
                    order: this.order,
                    by: this.by
                }
                defendService.getSafePolt(5, params)
                .then((res) => {
					
					if (res.errcode === 0) {
						this.total_num = res['5'].count
                        this.tableData =  res['5'].data  
                    }
				})
            },
			setData(params) {
				if (params.oper=='page_change') {
					this.loadData(params)
					return 
				}
				this.status ='ing'
                realTimeService.setWhiteList(params)
                .then((res) => {		
					
					if (res.errcode === 0) {
                        this.status ='ok'
                         if (params.oper=='del') {
                            this.selectedItems =[]
                        }
                        let reload = {
                            oper:params.oper,
                            page:params.page
                        }
                        this.loadData(reload)
                    } else {
                        this.status = 'error'
                        this.errorMsg = res.errorMessage	
                    }
				})
            },
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.loadData()
            }, 
            rankData (param) {
                this.order = param.order 
                this.by = param.by
                this.loadData()
            },
            addData (data) {
                this.status ='ing'
                let sendStr = `${data.mac}|${data.note}`
                defendService.addSafePolt(5, {5: sendStr})
                .then((res) =>{
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.loadData()
                    } else {
                        this.status =''
                    }
                })
            },
            delData (data) {
                this.status ='ing'
                defendService.delSafePolt(5, {5: data.ids})
                .then((res) =>{
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.loadData()
                        this.selectedItems = []
                    } else {
                        this.status =''
                    }
                })
            }
        }
    }
</script>